﻿<section id="conversation" ng-class="{busy: IsLoadingMessages}">
    <image-previewer attachment="AttachmentToPreview"></image-previewer>

    <h3><span ng-bind="Conversation.Receiver.FullName"></span></h3>
    <ul class="messages scroll auto-scroll">
        <li ng-class="{show: HasMoreMessages}">
            <a ng-show="!IsLoadingMessages" href="javascript:;" ng-click="LoadHistory()"><img src="Images/Time-Machine-icon.png" /> <span ng-bind="HasMoreMessages?'Show More...':'No more messages'"></span></a>
            <ul ng-show="IsLoadingMessages" class="clearfix">
                <li class="barlittle" />
                <li class="barlittle" />
                <li class="barlittle" />
                <li class="barlittle" />
                <li class="barlittle" />
            </ul>
        </li>
        <li ng-repeat="msg in Messages | orderBy : 'Id'" ng-class="{sending: msg.IsNew && msg.State!='Error'}">
            <div class="clearfix">
                <span class="profile"><i ng-bind="msg.Profile.FullName"></i> says:</span>
                <span class="state" ng-bind="'( '+msg.State+' )'"></span>
            </div>
            <div>
                <pre><a ng-if="msg.Attachment" ng-href="{{msg.Attachment.Url}}" title="Click to download" download="{{msg.Attachment.Raw().filename}}" ng-bind="msg.Attachment.Raw().filename+' ( '+msg.Attachment.Filesize+' )'"></a><br ng-if="msg.Attachment&&!msg.Raw().attachment_only" /><span ng-if="!msg.Raw().attachment_only" emoji autolink autoscrollintoview ng-bind="msg.Content"></span></pre>
                <img ng-if="msg.Attachment.Raw().preview" ng-click="Preview(msg.Attachment)" ng-src="{{msg.Attachment.Raw().preview}}" />
            </div>
        </li>
    </ul>
    <form name="convForm">
        <button class="btn btn-small" type="button" ng-click="AttachClick($event)">
            <img src="Images/attachment-icon.png" />
            <span ng-show="Attachment" ng-bind="Attachment.name"></span>
        </button>
        <input id="inputFile" type="file" ng-file-select="FileSelected($files)" hidden />
        <div class="textarea" contenteditable strip-br replace-br autofocus ng-file-drop="FileSelected($files)" ng-model="ChatInput" ng-keypress="KeyPress($event)" ng-keydown="KeyDown($event)" required></div>
        <button class="btn btn-primary btn-small" type="submit" ng-click="Send()" ng-disabled="convForm.$invalid && !Attachment">Send</button>
    </form>
</section>